<template>
	<uni-transition mode-class="fade" :show="show">
	<view class="payment-wrapper layer-black" @click="closeLayer">
		<view class="payment-content" @click.stop="">
			<view class="payment-title fz30 b-b-1 flex-c-s">
				<text style="width: 80rpx;"></text> <text class="fz30">选择支付方式</text> <text style="width: 80rpx;" @click="closeLayer"><uni-icons type="closeempty" size="20"></uni-icons></text>
			</view>
			<!-- <view class="payment-money ">
				{{ money }}
			</view> -->
			<view class="current-payment flex-c-s fz26">
				<text>付款方式</text>
				<view class="flex-c">
					<view class="payment-list-wrapper flex-c">
						<image v-if="payment === payType.PayTypeWeChatPay" class="play-icon" src="/static/images/wx-pay.png" mode=""></image>
						<image v-if="payment === payType.PayTypeAliPay" class="play-icon" src="/static/images/zfb-pay.png" mode=""></image>
						<image v-if="payment === payType.PayTypeJinDou" class="play-icon" src="/static/images/image59@2x.png" mode=""></image>
						<image v-if="payment === payType.PayTypeBalance" class="play-icon" src="/static/images/yueb.png" mode=""></image>
					</view>
					<text>{{ payName }}</text>
				</view>
			</view>
			<view class="payment-list-wrapper">
				<view class="pay-list fz26">
					<radio-group @change="radioChange">
						<label class="uni-list-cell uni-list-cell-pd flex-c-s b-b-1">
							<view class="flex-c">
								<image class="play-icon"  src="/static/images/wx-pay.png" mode=""></image>
								<view>微信支付</view>
							</view>
							<radio :value="payType.PayTypeWeChatPay" :disabled="disabledWeChatPay" :checked="payType.PayTypeWeChatPay === defaultPayType" color="#F33C72" />
						</label>
						
						<label class="uni-list-cell uni-list-cell-pd flex-c-s b-b-1"> 
							<view class="flex-c">
								<image class="play-icon"  src="/static/images/zfb-pay.png" mode=""></image>
								<view>支付宝支付</view>
							</view>
							<radio :value="payType.PayTypeAliPay" :disabled="disabledAliPay" :checked="payType.PayTypeAliPay === defaultPayType" color="#F33C72" />
						</label>
						
						<label class="uni-list-cell uni-list-cell-pd flex-c-s b-b-1">
							<view class="flex-c">
								<image class="play-icon"  src="/static/images/image59@2x.png" mode=""></image>
								<view>金豆支付</view>
							</view>
							<radio :value="payType.PayTypeJinDou" :disabled="disabledJinDou" :checked="payType.PayTypeJinDou === defaultPayType" color="#F33C72" />
						</label>
						<label class="uni-list-cell uni-list-cell-pd flex-c-s">
							<view class="flex-c">
								<image class="play-icon"  src="/static/images/yueb.png" mode=""></image>
								<view>余额支付</view>
							</view>
							<radio :value="payType.PayTypeBalance" :disabled="disabledBalance" :checked="payType.PayTypeBalance === defaultPayType" color="#F33C72" />
						</label>
						<label class="uni-list-cell uni-list-cell-pd flex-c-s" v-if="showOffline">
							<view class="flex-c">
								<image class="play-icon"  src="/static/images/offline-pay.png" mode=""></image>
								<view>线下支付</view>
							</view>
							<radio :value="payType.PayTypeOffline" :disabled="disabledOffline" :checked="payType.PayTypeOffline === defaultPayType" color="#F33C72" />
						</label>
					</radio-group>
				</view>
				<button class="payment-btn public-large-btn" @click="confirmPayment">确认</button>
			</view>
		</view>
	</view></uni-transition>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, toRefs, ref} from 'vue'

import { paymentMethod, payType } from '@/config'


export default defineComponent({
	props: {
		money: {
			type: Number,
			default: 0
		},
		disabledBalance: {
			type: Boolean,
			default: false
		},
		disabledWeChatPay: {
			type: Boolean,
			default: false
		},
		disabledAliPay: {
			type: Boolean,
			default: false
		},
		disabledJinDou: {
			type: Boolean,
			default: false
		},
		disabledOffline: {
			type: Boolean,
			default: true
		},
		showOffline: {
			type: Boolean,
			default: false
		},
		defaultPayType: {
			type: Number,
			default: payType.PayTypeJinDou
		},
	},
	setup(props, ctx) {
		const paymentAni = ref()
		const state = reactive({
			paymentList: paymentMethod,
			payment: props.defaultPayType,
			modeClass: 'fade' as string | string[],
			styles: {},
			show: false,
			payType,
			payPramas: '' as string | object,
		})
		
		const payName = computed(() => {
			let arr = state.paymentList.filter((item) => item.value === state.payment)
			if(arr.length) return arr[0].label;
			return ''
		})
		
		const radioChange = (e: any) => { 
			state.payment = e.detail.value  
			ctx.emit('changeType', state.payment)
		}
		
		const openLayer = (pramas: any) => {
			state.payPramas = pramas
			state.show = true 
		}
		
		const closeLayer = () => {
			state.show = false
		}
		
		const confirmPayment = () => { confirm
			closeLayer() 
			ctx.emit('confirm', state.payment)
			// uni.requestPayment({
			//     provider: 'alipay',
			//     orderInfo: state.payPramas, 
			//     success: function (res) { 
			//         uni.showToast({ title: '支付成功', icon: 'success' })
			// 		try{
			// 			ctx.emit('success', res)
			// 		}catch(e){
			// 			//TODO handle the exception
			// 		} 
			// 		closeLayer()
			//     },
			//     fail: function (err) {
			//         uni.showToast({ title: '支付失败', icon: 'error' })
			// 		try{
			// 			ctx.emit('fail', err)
			// 		}catch(e){
			// 			//TODO handle the exception
			// 		} 
			//     }
			// });
		}
		
		return {
			payName,
			radioChange,
			closeLayer,
			openLayer,
			paymentAni,
			confirmPayment,
			...toRefs(state)
		}
	}
})
</script>

<style lang="scss" scoped>
.payment-wrapper{
	display: flex;
	align-items: flex-end;
	z-index: 100;
	.current-payment{
		padding: 24rpx 0;
	}
	.payment-content{ 
		// height: 800rpx;
		background: #ffffff;
		border-radius: 22rpx 22rpx 0px 0px;
		padding: 0 24rpx;
		padding-bottom: 50rpx;
		.payment-title{
			text-align: center;
			padding: 28rpx 0;
		}
		.payment-money{
			text-align: center;
			font-size: 48rpx;
			font-family: Plus Jakarta Sans, Plus Jakarta Sans-700;
			font-weight: 700;
			color: #333333;
			padding: 48rpx 0 72rpx 0;
		}
		.payment-btn{
			margin-top: 44rpx;
		}
		.payment-list-wrapper{
			.pay-list{
				background-color: #f8f8fa;
				border-radius: 16rpx;
				padding: 24rpx;
			}
			.uni-list-cell{
				padding: 24rpx 0;
			}
			.play-icon{
				height: 38rpx;
				width: 38rpx;
				margin-right: 16rpx;
			}
			
		}
	}
}
</style>